<template>
  <div class="log">
    <div class="log_main">
      <a-card>
        <div class="header">
          <div>
            <h2>我的点券</h2>
            <div class="my_main">
              <p>{{ num }}</p>
              <a-button type="primary">充值</a-button>
            </div>
          </div>
          <a-input-search
            v-if="logval !== 1"
            placeholder="请输入商品ID进行搜索"
            style="width: 250px;height:40px"
            v-model="search"
            @search="onSearch"
          />
        </div>
        <div class="log_content">
          <a-table
            :columns="column"
            :rowKey="(record, index) => index"
            :showHeader="true"
            :data-source="infodata"
            :pagination="false"
          >
            <template slot="title">
              <div class="card_title">
                <a-radio-group v-model="logval" @change="onlogChange">
                  <a-radio :value="1">
                    <p>充值记录</p>
                    <div></div>
                  </a-radio>
                  <a-radio :value="2">
                    <p>支出记录</p>
                    <div></div>
                  </a-radio>
                  <a-radio :value="3">
                    <p>系统退还</p>
                    <div></div>
                  </a-radio>
                </a-radio-group>
                <a-tooltip>
                  <template slot="title">
                    prompt text
                  </template>
                  <a-icon type="question-circle" theme="filled" style="font-size:16px" />充值扣费说明
                </a-tooltip>
                <a-range-picker
                  :ranges="{ 今日: [moment(), moment()], 本月: [moment(), moment().endOf('month')] }"
                  v-model="time1"
                  format="YYYY/MM/DD"
                  @change="handleChange"
                />
                <a-button icon="download" @click="exportToExcel">
                  下载报表
                </a-button>
              </div>
            </template>
            <div v-if="record.goods_title" slot="goods_title" slot-scope="text, record">
              <a-tooltip>
                <template slot="title">
                  商品名称
                </template>
                {{ text }}
              </a-tooltip>
            </div>
            <div v-if="record.item_id" slot="item_id" slot-scope="text, record">
              <a-tooltip>
                <template slot="title">
                  京东商品ID
                </template>
                {{ text }}
              </a-tooltip>
            </div>
            <div v-if="record.before_integral" slot="before_integral" slot-scope="text, record">
              <a-tooltip>
                <template slot="title">
                  操作之前的点券数
                </template>
                {{ text }}
              </a-tooltip>
            </div>
            <div v-if="record.integral" slot="integral" slot-scope="text, record">
              <a-tooltip>
                <template slot="title">
                  操作的点券数额
                </template>
                {{ text }}
              </a-tooltip>
            </div>
            <div v-if="record.after_integral" slot="after_integral" slot-scope="text, record">
              <a-tooltip>
                <template slot="title">
                  操作之后的点券数
                </template>
                {{ text }}
              </a-tooltip>
            </div>
            <div v-if="record.create_at" slot="create_at" slot-scope="text, record">
              <a-tooltip>
                <template slot="title">
                  创建时间
                </template>
                {{ text }}
              </a-tooltip>
            </div>
          </a-table>
          <div style="width:100%;text-align:center;margin-top:15px;">
            <a-pagination
              show-quick-jumper
              :default-current="2"
              :total="total"
              :show-total="total => `共 ${total} 条`"
              show-less-items
              @change="onChange"
            />
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script>
import { getAdminIntegralInfo } from '@/api/integral'
import { exportExcel } from '@/assets/js/Export2Excel'
import moment from 'moment'
export default {
  name: 'Log',
  data () {
    return {
      moment,
      time1: [],
      search: '',
      num: 0,
      total: 0,
      infodata: [],
      column: [],
      logval: 1,
      start: '',
      end: '',
      page: '',
      tabletitle: [],
      tabledata: []
    }
  },

  computed: {},
  created () {
    this.getAdminIntegralInfo(1, 15, 1)
  },
  mounted () {},
  methods: {
    // 数组提取
    getArrayKey (array, key) {
      var resc = []
      if (array) {
        array.forEach(function (t) {
          resc.push(t[key])
        })
      }
      // 使用: this.getArrayKey(array, "key");
      return resc
    },
    // 获取用户点券使用记录
    getAdminIntegralInfo (page, pagesize, type, skuid, start, end) {
      getAdminIntegralInfo({
        page: page,
        pagesize: pagesize,
        type: type,
        sku_id: skuid,
        start: start,
        end: end
      })
        .then(res => {
          if (res.code === 200) {
            console.log('使用记录返回', res)
            this.num = res.data.user_price
            this.infodata = []
            this.infodata = res.data.data.data
            console.log('this.infodata', this.infodata)
            this.total = res.data.data.count
            this.column = []
            if (this.infodata.length > 0) {
              if (this.infodata[0].item_id) {
                this.column.push({
                  title: '京东商品ID',
                  dataIndex: 'item_id',
                  key: 'item_id',
                  align: 'center',
                  scopedSlots: { customRender: 'item_id' }
                })
              }
              // if (this.infodata[0].goods_id) {
              //   this.column.push({
              //     title: '京东商品ID',
              //     dataIndex: 'goods_id',
              //     key: 'goods_id',
              //     align: 'center',
              //     scopedSlots: { customRender: 'goods_id' }
              //   })
              // }
              if (this.infodata[0].goods_title) {
                this.column.push({
                  title: '商品名称',
                  dataIndex: 'goods_title',
                  key: 'goods_title',
                  align: 'center',
                  scopedSlots: { customRender: 'goods_title' }
                })
              }
              if (this.infodata[0].before_integral) {
                this.column.push({
                  title: '操作之前的点券数',
                  dataIndex: 'before_integral',
                  key: 'before_integral',
                  align: 'center',
                  scopedSlots: { customRender: 'before_integral' }
                })
              }
              if (this.infodata[0].integral) {
                this.column.push({
                  title: '操作的点券数额',
                  dataIndex: 'integral',
                  key: 'integral',
                  // align: 'center',
                  scopedSlots: { customRender: 'integral' }
                })
              }
              if (this.infodata[0].after_integral) {
                this.column.push({
                  title: '操作之后的点券数',
                  dataIndex: 'after_integral',
                  key: 'after_integral',
                  align: 'center',
                  scopedSlots: { customRender: 'after_integral' }
                })
              }
              if (this.infodata[0].create_at) {
                this.column.push({
                  title: '操作时间',
                  dataIndex: 'create_at',
                  key: 'create_at',
                  align: 'center',
                  scopedSlots: { customRender: 'create_at' }
                })
              }
            } else {
              this.column = []
            }
            console.log('this.column', this.column)
            // this.setState({
            //   infodata: this.infodata
            // })
            this.tabletitle = this.getArrayKey(this.column, 'title')
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    onChange (pageNumber) {
      // console.log('Page: ', pageNumber)
      this.page = pageNumber
      this.getAdminIntegralInfo(pageNumber, 15, this.logval, this.search, this.start, this.end)
    },
    exportToExcel () {
      // excel表格数据导出
      require.ensure([], () => {
        console.log(this.column, this.infodata)
        const tHeader = this.tabletitle
        var filterVal = []
        if (this.logval === 1) {
          filterVal = ['after_integral', 'integral', 'before_integral', 'create_at']
        }
        if (this.logval === 2) {
          filterVal = ['item_id', 'goods_title', 'integral', 'create_at']
        }
        if (this.logval === 3) {
          filterVal = ['item_id', 'goods_title', 'integral', 'create_at']
        }
        const list = this.infodata
        const data = this.formatJson(filterVal, list)
        const excelName = '点券操作记录'
        exportExcel(tHeader, data, excelName)
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleChange (dates, dateStrings) {
      //   console.log('From: ', dates[0], ', to: ', dates[1])
      //   console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
      if (dateStrings[0] !== '' && dateStrings[1] !== '') {
        this.start = moment(dateStrings[0]).format('X')
        this.end = moment(dateStrings[1]).format('X')
        console.log(this.start, this.end)
      } else {
        this.start = ''
        this.end = ''
      }
      this.getAdminIntegralInfo(1, 15, this.logval, this.search, this.start, this.end)
    },
    onlogChange (e) {
      console.log('radio checked', e.target.value)
      this.search = ''
      this.start = null
      this.end = null
      this.time1 = []
      this.getAdminIntegralInfo(1, 15, this.logval)
    },
    onSearch (value) {
      console.log(value)
      this.getAdminIntegralInfo(1, 15, this.logval, this.search, this.start, this.end)
    }
  }
}
</script>

<style lang="less" scoped>
// /deep/.ant-table-thead {
//   display: none;
// }
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .my_main {
    display: flex;
    align-items: center;
    p {
      margin: 0;
      font-size: 36px;
      color: orange;
      font-weight: bold;
      padding: 10px 20px;
    }
  }
}
.card_title {
  width: 100%;
  height: 53px;
  background-color: #e2e0e0;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  /deep/.ant-radio {
    display: none !important;
  }
  /deep/.ant-radio-wrapper {
    color: gray;
    span {
      display: inline-block;
      margin-top: 16px;
    }
    p {
      padding: 0;
      margin: 0;
    }
    div {
      width: 8px;
      border: 8px solid;
      border-color: transparent transparent transparent;
      margin: 0 auto;
    }
  }
  /deep/.ant-radio-wrapper-checked {
    position: relative;
    color: #000;
    div {
      border-color: transparent transparent white;
    }
  }
}
</style>
